<template>
    <van-nav-bar title="购物车列表" left-text="" left-arrow @click-left="goBack" />

    <van-checkbox-group style = "margin-bottom: 100px" v-model="checked">
        <div class="cart" v-for="item in cartlist" :key="item.id">
            <van-checkbox :name="item.id"></van-checkbox>
            <van-swipe-cell>
                <!-- 都是组件嵌套 -->
                <van-card :price="item.total" :title="item.product.name" class="goods-card"
                    :thumb="item.product.thumbs_text" @click-thumb="toProductInfo(item)">
                    <template #num>
                        <van-stepper v-model="item.nums" integer @change="CartEdit(item)" />
                    </template>
                    <template #desc>
                        <div v-if="item.attrs">
                            <van-tag v-for="items in item.attrs" type="warning" size="medium" style="margin-right: 10px;">{{ items.value }}</van-tag>
                        </div>
                        <div>单价：{{ item.price }}</div>
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="CartDel(item)" />
                </template>
            </van-swipe-cell>
        </div>
    </van-checkbox-group>

    <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checkedAll" @click="changeCheckedAll">全选</van-checkbox>
    </van-submit-bar>
    <Footer />
</template>

<script setup>
import Footer from '@/components/common/footer.vue'
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.go(-1) }
const LoginUser = reactive(proxy.$cookies.get('LoginUser') ? proxy.$cookies.get('LoginUser') : {})
const checked = ref([])
const cartlist = ref([])
const checkedAll = ref(false)
onBeforeMount(() => {
    getCartData()
})
const getCartData = async () => {
    let result = await Api.cartIndex({
        busid: LoginUser.id
    });

    if (result.code == 1) {
        cartlist.value = result.data
        cartlist.value.forEach((item) =>{
            if(item.attrs)
            {
                item.attrs = JSON.parse(item.attrs)
            }
        })
    }
}

const total = computed(() => {
    let price = 0;

    if (checked.value.length > 0) {
        cartlist.value.forEach((item) => {
            if (checked.value.includes(item.id)) {
                price += parseFloat(item.total) //parseFloat钱要精确浮点数
            }
        })
        
        if (checked.value.length >= cartlist.value.length) {
            checkedAll.value = true
        }
        else {
            checkedAll.value = false
        }
    }
    if (checked.value.length === 0){
        checkedAll.value = false
    }
    return price * 100
})

const changeCheckedAll = () => {
    if (checkedAll.value) {
        checked.value = cartlist.value.map((item) => item.id)
    }
    else {
        checked.value = [];
    }
}

const CartEdit = async (val) => {
    let result = await Api.cartEdit({
        busid: LoginUser.id,
        nums: val.nums,
        cartid: val.id
    });

    if (result.code == 1) {
        getCartData()
    }
}

const CartDel = (val) => {
    showConfirmDialog({
        title: '删除',
        message:
            '确认是否删除购物车商品？',
    })
        .then(async () => {
            let result = await Api.cartDel({
                busid: LoginUser.id,
                cartid: val.id
            });

            if (result.code == 1) {
                success(result.msg)
                getCartData()
            } else {
                error(result.msg);
            }
        })
        .catch(() => { });
}

const toProductInfo = (val) =>{
    proxy.$router.push({
        path: '/product/info',
        query:{
            proid: val.proid
        }
    })
}

const onSubmit = () =>{

if(checked.value.length <= 0)
{
    error('请选择购物车商品');
    return false;
}

proxy.$router.push({
    path: '/product/confirm',
    query:{
        cartids: checked.value.toString()
    }
})
}

</script>
<style scoped>
.van-submit-bar {
    bottom: 50px;
}
.cart {
    display: flex;
    align-items: center;
    width: 100%;
}

.cart .van-swipe-cell {
    width: 100%;
}

.cart .van-swipe-cell__right .van-button {
    height: 100%;
}
</style>